<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="学前端，到达内" fixed>
      <div v-if="$store.state.islogin" slot="right">
        欢迎：{{$store.state.name}}
      </div>
      <div v-else slot="right">
        <router-link to="/login">登录</router-link>&nbsp;
        <router-link to="/register">注册</router-link>
      </div>
    </mt-header>
    <!-- 导航 -->
    <mt-navbar class="header" v-model="navactive" fixed>
      <mt-tab-item 
        :id="item.id+''" v-for="(item,i) in cats" :key="i">
        {{item.category_name}}
      </mt-tab-item>
    </mt-navbar>
    <!-- 面板 -->
    <mt-tab-container class="container">
      <mt-tab-container-item
        infinite-scroll-distance="30" 
        v-infinite-scroll="loadmore"
        infinite-scroll-disabled="busy"
        :infinite-scroll-immediate-check="true">

        <mt-swipe class="myswipe" :style="{'height':h}"          
          :speed="300"
          :auto="3000">
          <mt-swipe-item>
            <img src="/banner/1.jpg">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/banner/2.jpg">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/banner/3.jpg">
          </mt-swipe-item>
        </mt-swipe>

        <!-- 单一文章信息开始 -->
        <div class="articleItem" 
          v-for="(item,i) in articles" :key="i">
          <router-link :to="`/article?id=${item.id}`">
            <div class="articleItem-header">{{item.subject}}</div>
            <div class="articleItem-wrapper">
              <div class="articleImg">
                <img v-if="item.image" :src="`/articles/${item.image}`" />
              </div>
              <div class="articleDes">
                {{item.description}}
              </div>
              <!-- 文章简介结束 -->
            </div>
            <!-- 文章图文信息结束 -->
          </router-link>
        </div>
        <!-- 单一文章信息结束 -->

      </mt-tab-container-item>
    </mt-tab-container>

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="main">首页
        <img v-if="selected=='main'"
          src="../assets/main_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/main_0.png" slot="icon" alt="">
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'"
          src="../assets/me_1.png" slot="icon" alt="">
        <img v-else
          src="../assets/me_0.png" slot="icon" alt="">
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'main',
      navactive: '1',
      h: '210px',
      cats: [],   // 保存类别列表[{id:1, category_name:'UI'},{}...]
      articles: [],  // 保存当前文章列表
      busy: false,
      page: 1        // 保存当前页码  默认第一页
    }
  },
  watch: {

    /** 监听导航的变化 */
    navactive(newval){
      // 是窗口滚动条滚到0,0的位置
      window.scrollTo(0,0);
      this.page = 1;   // 将page变量改为1。
      console.log(newval); // newval即是当前激活项的类别ID
      // 发送http请求，获取响应数据，更新文章列表。
      this.loadArticles(newval, 1, (arts)=>{
        this.articles = arts;
      });
    },

    /** 监听底部选项卡的变化 */
    selected(newval){
      if(newval=='main'){
        this.$router.push('/')  //  路径 / 映射到Home.vue
      }else if(newval=='me'){
        this.$router.push('/me')  // 路径 /me 映射到Me.vue
      }
    }
  },
  methods: {

    /** 发送http请求，加载文章列表
     *  cid: 文章类别id
     *  page:  页码
     *  callback:  回调函数  将会在数据加载完毕后自动调用
     *  所以需要在callback中声明文章列表获取后的操作
     */
    loadArticles(cid, page, callback){
      // 弹出加载提示框
      // this.$indicator 就是 Indicator对象
      // 在Vue.use(MintUI)时，为Vue.prototype.$indicator赋的值
      this.$indicator.open({
        text:'加载中...',
        spinnerType: 'snake'
      });
      this.axios.get(
        `/articles?cid=${cid}&page=${page}`).then(res=>{
          callback(res.data.results);
          this.$indicator.close();
      })
    },

    /** 触底加载下一页文章列表 */
    loadmore(){
      // 发请求，加载下一页数据，追加到当前列表末尾
      let cid = this.navactive; // navactive就是当前类别ID
      this.page++;  // 当前页码+1
      let page = this.page;     // 下一页的页码
      console.log(`loadmore -- cid:${cid} page:${page}`);
      this.busy = true;  // 禁用无限滚动
      this.loadArticles(cid, page, (arts)=>{
        this.articles.push(...arts);
        this.busy = false;
      });
    },

    /** 初始化轮播图的高度 */
    initSwipeHeight(){
      // 计算轮播图的高度，对h变量进行赋值
      let picw = 1242;  // 图片宽度
      let pich = 698;   // 图片高度
      let imgw = window.screen.width; // 屏幕的宽度
      let imgh = ((imgw * pich)/picw)+'px';
      this.h = imgh;
    },

    /** 发送http请求，加载类别列表到界面 */
    loadCategory(){
      // 发送http请求，获取类别列表
      this.axios.get('/category').then(result=>{
        console.log(result);
        let cats = result.data.results; // [{},{},{}]
        // 存入data
        this.cats = cats;
      })
    }
  },

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted(){
    // 发送http请求，获取UI类别下的第一页文章列表
    this.loadArticles(1, 1, (arts)=>{
      this.articles = arts; // 将服务端返回的结果设置为当前列表
    })

    // 发送http请求，获取类别列表
    this.loadCategory();
    // 计算轮播图的高度，对h变量进行赋值
    this.initSwipeHeight();

  }
}
</script>

<style scoped>
.myswipe img {
  width: 100%;
}
.is-right a{
  color: white;
}
.container {
  margin-top: 90px;
  margin-bottom: 55px;
}
.header {
  margin-top: 40px;
}
.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>



